<div class="flex md:flex-col md:fixed md:h-full pb-2 md:pb-32 w-full md:w-60! lg:w-60!">
    <div class="flex flex-col w-full">
        <div class="flex flex-row w-full justify-between! md:flex-col gap-y-1
                    [&>*]:font-semibold [&>div]:px-3 md:[&>div]:px-2 [&>div]:py-2 md:[&>div]:py-1 [&>div]:rounded-md
                    [&>div>a]:flex [&>div>a]:flex-row [&>div>a]:items-center [&>div>a]:flex-row [&>div>a]:gap-x-2
                    [&>div]:hover:bg-slate-200 dark:[&>div]:hover:bg-slate-700 creme:[&>div]:hover:bg-creme-dark">
            <div>
                <a href="{% url 'pdf_overview' %}">
                    <svg class="w-5 h-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400.004 400.004" xml:space="preserve">
                        <!-- source: https://www.svgrepo.com/svg/97894/left-arrow -->
                        <!-- license: CC0 License-->
                        <path d="M382.688,182.686H59.116l77.209-77.214c6.764-6.76,6.764-17.726,0-24.485c-6.764-6.764-17.73-6.764-24.484,0L5.073,187.757
                            c-6.764,6.76-6.764,17.727,0,24.485l106.768,106.775c3.381,3.383,7.812,5.072,12.242,5.072c4.43,0,8.861-1.689,12.242-5.072
                            c6.764-6.76,6.764-17.726,0-24.484l-77.209-77.218h323.572c9.562,0,17.316-7.753,17.316-17.315
                            C400.004,190.438,392.251,182.686,382.688,182.686z"/>
                    </svg>
                    <span class="hidden md:block">Back to App</span>
                </a>
            </div>
            <div {% if page == 'pdf_details' %} class="bg-slate-200 md:bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light" {% endif %}>
                <a href="{% url 'pdf_details' pdf.id %}">
                    <svg fill="currentColor" class="w-5 h-5" version="1.1" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 330 330" xml:space="preserve">
                        <!-- source: https://www.svgrepo.com/svg/65094/information -->
                        <!-- license: CC0 License-->
                        <g>
                            <path d="M165,0C74.019,0,0,74.02,0,165.001C0,255.982,74.019,330,165,330s165-74.018,165-164.999C330,74.02,255.981,0,165,0z M165,300c-74.44,0-135-60.56-135-134.999C30,90.562,90.56,30,165,30s135,60.562,135,135.001C300,239.44,239.439,300,165,300z"/>
                            <path d="M164.998,70c-11.026,0-19.996,8.976-19.996,20.009c0,11.023,8.97,19.991,19.996,19.991 c11.026,0,19.996-8.968,19.996-19.991C184.994,78.976,176.024,70,164.998,70z"/>
                            <path d="M165,140c-8.284,0-15,6.716-15,15v90c0,8.284,6.716,15,15,15c8.284,0,15-6.716,15-15v-90C180,146.716,173.284,140,165,140z"/>
                        </g>
                    </svg>
                    <span class="hidden md:block">Details</span>
                </a>
            </div>
            <div {% if page == 'pdf_details_highlights' %} class="bg-slate-200 md:bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light" {% endif %}>
                <a href="{% url 'pdf_details_highlight_overview' pdf.id %}">
                    <svg fill=currentColor version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                        class="w-5 h-5" viewBox="0 0 92.274 92.273" xml:space="preserve">
                            <!-- source: https://www.svgrepo.com/svg/118905/pencil-diagonal-outline-symbol-on-a-line -->
                            <!-- license: CC0 License-->
                            <path d="M12.879,83.265l18.137-6.483c2.271,0.721,4.869,0.177,6.717-1.671l48.378-50.906c2.555-2.556,2.556-6.714,0-9.27
                                L73.092,1.916c-2.534-2.535-6.646-2.554-9.207-0.062L12.523,49.85l-0.102,0.1c-1.803,1.801-2.327,4.396-1.589,6.67L4.476,74.91
                                c-0.523,1.512-0.14,3.188,0.991,4.318l3.058,3.06C9.665,83.428,11.362,83.809,12.879,83.265z M68.416,9.038L78.979,19.6
                                L32.992,67.991L19.627,54.627L68.416,9.038z M17.126,63.923l6.604,6.604l-10.162,3.632L17.126,63.923z"/>
                            <rect x="5.583" y="85.239" width="82.3" height="7.034"/>
                    </svg>
                    <span class="hidden md:block">Highlights</span>
                </a>
            </div>
            <div {% if page == 'pdf_details_comments' %} class="bg-slate-200 md:bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light" {% endif %}>
                <a href="{% url 'pdf_details_comment_overview' pdf.id %}">
                    <svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                         class="w-5 h-5" viewBox="0 0 98.167 98.167" xml:space="preserve">
                        <!-- source: https://www.svgrepo.com/svg/158876/write-a-note -->
                        <!-- license: CC0 License-->
                        <path d="M80.708,12.67v-2.127c0-1.001-0.812-1.813-1.813-1.813H1.813C0.812,8.73,0,9.543,0,10.543v77.08
                            c0,1.002,0.811,1.813,1.813,1.813h77.082c1.002,0,1.813-0.813,1.813-1.813V48.776v-1.009l-9.656,9.654v22.357H9.657V18.386h61.395
                            v3.94L80.708,12.67z"/>
                        <path d="M47.654,50.303c-0.19,0.189-0.303,0.443-0.315,0.693l-1.847,12.851c-0.045,0.338,0.07,0.685,0.312,0.926
                            c0.207,0.206,0.48,0.319,0.773,0.319c0.053,0,0.104-0.004,0.156-0.012l12.792-1.84c0.285-0.007,0.547-0.119,0.754-0.328
                            l29.02-29.026l-12.609-12.61L47.654,50.303z"/>
                        <path d="M98.167,24.562c0-0.293-0.114-0.567-0.321-0.772L86.785,12.729c-0.395-0.399-1.15-0.399-1.547-0.001l-5.221,5.221
                            l12.608,12.609l5.222-5.223C98.053,25.128,98.167,24.854,98.167,24.562z"/>
                    </svg>
                    <span class="hidden md:block">Comments</span>
                </a>
            </div>
        </div>
    </div>
    <div class="hidden md:block md:w-52! lg:w-60! py-2 absolute bottom-0 fixed
                border-t border-slate-300 dark:border-slate-600 creme:border-stone-400
                text-sm text-slate-400 creme:text-stone-500">
        <a class="pl-1 hover:underline" href="https://github.com/mrmn2/PdfDing">PdfDing</a>
        <span> {{ VERSION }}</span>
    </div>
</div>
